<div id="tb<?php echo $uniqid;?>" class="easyui-panel" style="padding:5px">
  <table class="datagrid-toolbar" cellspacing="0" cellpadding="0" style="padding:5px 10px !important; background: none; border-bottom:none;">
    <tbody>
    <tr>
      <td colspan="4" style="padding-bottom: 5px;">
        <a href="javascript:;" onclick="bannerAdd();" class="l-btn l-btn-small l-btn-plain"><span
                class="l-btn-left l-btn-icon-left"><i class="iconfont icon-tianjia1"></i><span class="l-btn-text">新增</span></span></a>
        <a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
                class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                class="l-btn-text">重载</span></span></a>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='all'?'selected':''"
              @click="filter('all')"><span class="l-btn-text">全部</span></span>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='nouse'?'selected':''"
              @click="filter('nouse')"><span class="l-btn-text">已隐藏</span></span>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='inuse'?'selected':''"
              @click="filter('inuse')"><span class="l-btn-text">显示中</span></span>
      </td>
    </tr>
    <tr>
      <td style="padding: 0 10px;"><span style="line-height:30px;">上传日期：</span>
        <input id="applyStartOn" v-model="params.apply_start" style="width:110px" type="text"
               class="easyui-datebox"> </input>至
        <input id="applyEndOn" v-model="params.apply_end" style="width:110px" type="text"
               class="easyui-datebox"> </input>
      </td>
      <td>
        <a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
              class="l-btn-text">查询</span></span></a>
        <a href="javascript:void(0);" @click="reset" class="l-btn l-btn-small l-btn-plain"><span
                class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxinrefresh39"></i><span
                class="l-btn-text">重置</span></span></a>
      </td>
    </tr>
    </tbody>
  </table>
</div>
<div class="con"  style="-moz-user-select:none;">
  <table id="DianpuBannerTable"></table>
</div>
<div id="DianpuBannerdlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<script>
  var DianpuBannerVm = new Vue({
    el: '#tb<?php echo $uniqid;?>',
    data: {
      params: {
        apply_start: '',
        apply_end: '',
        mode: 'all',
      },
      defParams: {
        apply_start: '',
        apply_end: '',
        mode: 'all',
      },
      initLoad:false,
    },
    filters: {
      formatDate(nS){
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      }
    },
    mounted() {
      setTimeout(()=>{
        this.mounted();
      }, 200);
    },
    methods: {
      mounted: function (){
        $('#tb<?php echo $uniqid;?> #applyStartOn').datebox('setValue', this.params.apply_start);
        $('#tb<?php echo $uniqid;?> #applyEndOn').datebox('setValue', this.params.apply_end);
        this.init();
      },
      init: function () {
        this.params.apply_start = $('#tb<?php echo $uniqid;?> #applyStartOn').datebox('getValue');
        this.params.apply_end = $('#tb<?php echo $uniqid;?> #applyEndOn').datebox('getValue');
        DianpuBannerReload();
      },
      filter(mode) {
        this.params.mode = mode;
        this.init();
      },
      reset:function (){
        this.params = JSON.parse(JSON.stringify(this.defParams));
        this.mounted();
      },
    }
  });
  
  var DianpuBannerReload = function () {
    if(DianpuBannerVm.initLoad){
      DianpuBannerVm.initLoad = false;
    }else{
      $("#DianpuBannerTable").datagrid('load', DianpuBannerVm.params);
    }
  };
  var DianpuBannerSearch = function () {
    var height = $(window).height() - $(".top").height() - 46;
    var width = $(window).width() - $(".leftmenu").width() - 8;
    $("#DianpuBannerTable").datagrid({
      title: '轮播图管理',
      width: width,
      height: height,//高度
      singleSelect: true,//如果为true，则只允许选择一行
      striped: true,//是否显示斑马线效果。
      rownumbers: false,//如果为true，则显示一个行号列。
      pagination: true,//是否显示分页
      pageSize: 10,
      pageList: [10, 20, 50, 100],
      method: 'post',
      sortName: 'created_at',
      sortOrder: 'desc',
      idField: 'id',
      url: '/merchant/banner/index',
      queryParams: DianpuBannerVm.params,
      fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
      nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
      selectOnCheck: false,
      checkOnSelect: true,
      loadMsg:'正在处理，请稍后。。。',
      toolbar: '#tb<?php echo $uniqid;?>',
      columns: [[
        {field:'id',title:'ID', width: fixWidth(5), align: "center", halign: 'center'},
        {field:'title',title:'标题', width: fixWidth(20), align: "center", halign: 'center'},
        {field:'image',title:'图片', width: fixWidth(20), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            return '<img style="max-width: 100%; max-height: 150px;" src="'+value+'">';
          }},
        {field:'status_name',title:'状态', width: fixWidth(10), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
            return '<div class="status_'+rowData.status+'" style="width: 100%; text-align: center;">'+value+'</div>'
          }},
        {field:'created_at',title:'上传时间', width: fixWidth(10), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value?value:'--';
          }},
        {field: 'action', title: '操作', width: fixWidth(10), formatter: function (value, rowData, rowIndex) {
            return '<a href="javascript:;" class="l-btn l-btn-small" onclick="bannerEdit(' + rowData.id + ')" ><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">编辑</span><span class="l-btn-icon icon-ok">&nbsp;</span></span></a>&nbsp;&nbsp;'+
                    '<a href="javascript:;" class="l-btn l-btn-small" onClick="bannerDelete(' + rowData.id + ')"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">删除</span><span class="l-btn-icon icon-no">&nbsp;</span></span></a>';
          }
        },
      ]],
    });
    DianpuBannerVm.initLoad = true;
  };
  var bannerAdd = function () {
    $("#DianpuBannerdlg").dialog({
      title: '上传新轮播图',
      closed: false,
      width: 720,
      height: 450,
      cache: false,
      href: '/merchant/banner/add',
      modal: true,
      buttons: [{
        text: '保存',
        id: 'bannersubmit',
        iconCls: 'icon-ok',
      }, {
        text: '关闭',
        iconCls: 'icon-no',
        handler: function () {
          $("#DianpuBannerdlg").dialog('close');
        }
      }]
    });
  };

  var bannerEdit = function (id) {
    let rowId = id || ($('#DianpuBannerTable').treegrid('getSelected') && $('#DianpuBannerTable').treegrid('getSelected').id);
    if (rowId) {
      $("#DianpuBannerdlg").dialog({
        title: '编辑轮播图',
        closed: false,
        width: 720,
        height: 450,
        cache: false,
        href: '/merchant/banner/edit?id=' + rowId,
        modal: true,
        buttons: [{
          text: '保存',
          id: 'bannersubmit',
          iconCls: 'icon-ok',
        }, {
          text: '关闭',
          iconCls: 'icon-no',
          handler: function () {
            $("#DianpuBannerdlg").dialog('close');
          }
        }]
      });
    } else {
      $.messager.alert('提示', '请先选择要编辑的行！', 'warning');
    }
  };

  var bannerDelete = function (id) {
    let rowId = id || ($('#DianpuBannerTable').treegrid('getSelected') && $('#DianpuBannerTable').treegrid('getSelected').id);
    if (rowId) {
      $.messager.confirm('提示', `确定删除 ID: ${rowId} 轮播图吗？`, function (r) {
        if (r) {
          $.messager.progress();
          $.post('/merchant/banner/delete', {id: rowId}, function (data) {
            $.messager.progress('close');
            if (parseInt(data.ret) === 0) {
              $.messager.show({
                title: '提示',
                msg: data.msg,
                timeout: 3000,
                showType: 'slide'
              });
              DianpuBannerReload();
            } else {
              $.messager.alert('提示', data.msg, 'warning');
            }
          }, 'json');
        }
      });
    } else {
      $.messager.alert('提示', '请先选择要删除的记录！', 'warning');
    }
  };

  onDatagridResize("#DianpuBannerTable");
  DianpuBannerSearch();
</script>
<style>
  .status_1{
    color: #0eb913;
  }
  .status_0{
    color: #9f1807;
  }

  .l-btn-plain{
    border: rgba(0,0,0,0) 1px solid;
  }

  .datagrid-body-row td{
    line-height: 1.8em !important;
  }

  .datagrid-row td{
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.8em !important;
  }

  .datagrid-toolbar .selected {
    color: #f1f1f1;
    background: #1065a7;
    border: 1px solid #f0f0f0;
  }

  .touxiang_wenzi span{
    color: #007293;
  }

  .keywords_input_search_box{
    width: 300px;
    border-color: #cccccc;
  }
</style>
